import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { formatDate } from "@/lib/utils";

export default function ChatPage() {
  // 模拟知识库数据
  const mockKnowledgeBases = [
    {
      id: "kb-1",
      name: "研究资料",
      description: "包含各种研究论文和资料",
      chats: [
        {
          id: "chat-1",
          title: "关于机器学习的问题",
          lastMessage: "深度学习和传统机器学习有什么区别？",
          updatedAt: new Date("2024-03-18T10:05:00"),
        },
        {
          id: "chat-2",
          title: "神经网络讨论",
          lastMessage: "卷积神经网络的优势是什么？",
          updatedAt: new Date("2024-03-17T15:30:00"),
        },
      ],
    },
    {
      id: "kb-2",
      name: "产品文档",
      description: "产品规格和用户手册",
      chats: [
        {
          id: "chat-3",
          title: "产品安装问题",
          lastMessage: "如何在Windows系统上安装该产品？",
          updatedAt: new Date("2024-03-16T09:15:00"),
        },
      ],
    },
    {
      id: "kb-3",
      name: "法律文件",
      description: "合同和法律文档",
      chats: [],
    },
  ];

  return (
    <div className="container mx-auto py-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
          聊天记录
        </h1>
        <p className="text-sm text-gray-500 dark:text-gray-400">
          与您的知识库进行交流，获取相关信息
        </p>
      </div>

      <div className="space-y-6">
        {mockKnowledgeBases.map((kb) => (
          <div key={kb.id} className="space-y-4">
            <div className="flex items-center justify-between">
              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
                {kb.name}
              </h2>
              <Link href={`/knowledge-bases/${kb.id}`}>
                <Button variant="outline" size="sm">
                  查看知识库
                </Button>
              </Link>
            </div>

            {kb.chats.length > 0 ? (
              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {kb.chats.map((chat) => (
                  <Link
                    key={chat.id}
                    href={`/chat/${kb.id}/${chat.id}`}
                    className="block"
                  >
                    <Card className="h-full transition-shadow hover:shadow-md">
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">{chat.title}</CardTitle>
                        <CardDescription className="text-xs">
                          最后更新: {formatDate(chat.updatedAt)}
                        </CardDescription>
                      </CardHeader>
                      <CardContent>
                        <p className="line-clamp-2 text-sm text-gray-600 dark:text-gray-300">
                          {chat.lastMessage}
                        </p>
                      </CardContent>
                    </Card>
                  </Link>
                ))}

                <Link href={`/chat/new?knowledgeBaseId=${kb.id}`} className="block">
                  <Card className="flex h-full flex-col items-center justify-center border-dashed p-6 transition-shadow hover:shadow-md">
                    <div className="mb-2 rounded-full bg-gray-100 p-2 dark:bg-gray-800">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="h-6 w-6 text-gray-600 dark:text-gray-400"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        strokeWidth={2}
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M12 4v16m8-8H4"
                        />
                      </svg>
                    </div>
                    <p className="text-center text-sm font-medium text-gray-900 dark:text-white">
                      创建新对话
                    </p>
                  </Card>
                </Link>
              </div>
            ) : (
              <Link href={`/chat/new?knowledgeBaseId=${kb.id}`} className="block">
                <Card className="flex flex-col items-center justify-center border-dashed p-6 transition-shadow hover:shadow-md">
                  <div className="mb-2 rounded-full bg-gray-100 p-2 dark:bg-gray-800">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="h-6 w-6 text-gray-600 dark:text-gray-400"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={2}
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M12 4v16m8-8H4"
                      />
                    </svg>
                  </div>
                  <p className="text-center text-sm font-medium text-gray-900 dark:text-white">
                    开始第一次对话
                  </p>
                </Card>
              </Link>
            )}
          </div>
        ))}
      </div>
    </div>
  );
} 